<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .nav {
            width: 100%;
            height: 40px;
            display: flex;
            position: fixed;
            left: 0;
            bottom: 0;
        }

        .nav .item {
            flex: 1;
            text-align: center;
            line-height: 40px;
            background-color: black;
            color: blanchedalmond;
        }

        .nav .active {
            background-color: brown;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="nav">
            <div class="item">
                <router-link to="/">首页</router-link>
            </div>
            <div class="item">
                <router-link to="/about">关于</router-link>
            </div>
            <div class="item">
                <router-link to="/list">列表</router-link>
            </div>
            <div class="item">
                <router-link to="/test">测试</router-link>
            </div>
         </div>
        <router-view></router-view>
    </div>
</body>

<template id="home">
    <div>
        首页
    </div>
</template>
<template id="about">
    <div>
        关于
    </div>
</template>
<template id="list">
    <div>
        列表
    </div>
</template>
<template id="routerLink">
    <a :href="'#'+to">
        <slot></slot>
    </a>
</template>
<template id="routerView">
    <div>
        <component :is="com"></component>
    </div>
</template>
<template id="test">
    <div>
        测试
    </div>
</template>
<template id="nofond">
    <div>
        404
    </div>
</template>

<script>
    let home = {
        template: "#home"
    }
    let about = {
        template: "#about"
    }
    let list = {
        template: "#list"
    }
    let test = {
        template: "#test"
    }
    let nofond = {
        template: "#nofond"
    }

    let routerLink = {
        props: ["to"],
        template: "#routerLink"
    }
    let routerView = {
        data() {
            return {
                com: "home",
                list: [{id: 1, msg: "首页", com: "home", path: "/"}, {id: 2, msg: "关于", com: "about", path: "/about"}, {id: 3, msg: "列表", com: "list", path: "/list"}, {id: 4, msg: "测试", com: "test", path: "/test"},
                {id: 0, msg: "404", com: "nofond", path: "/nofond"}]
            }
        },
        template: "#routerView",
        components: {
            home,
            about,
            list,
            test,
            nofond
        },
        methods: {
            hashchange() {
                // console.log(window.location.hash);
                let hash = window.location.hash;//得到值 #/about  #/list  
                hash = hash.split("#/")[1];//得到没有#/的值
                //根据hash知道对应的组件
                if (hash) {
                    let list = this.list.filter(item => item.com == hash);//找到这个集合
                    if (list.length) {//能找到
                        let info = list[0];
                        this.com = info.com;
                    } else {
                        this.com = "nofond";
                    }
                } else {
                    this.com = "home";
                    this.activeIndex = 1;
                }
            }
        },
        mounted() {//页面结构加载完成
            this.hashchange();
            window.onhashchange = () => {//hash值发生改变的事件
                this.hashchange();
                // // console.log(window.location.hash);
                // let hash = window.location.hash;//得到值 #/about  #/list  
                // hash = hash.split("#/")[1];//得到没有#/的值
                // //根据hash知道对应的组件
                // if (hash) {
                //     let list = this.list.filter(item => item.com == hash);//找到这个集合
                //     if (list.length) {//能找到
                //         let info = list[0];
                //         this.com = info.com;
                //     } else {
                //         this.com = "nofond";
                //     }
                // } else {
                //     this.com = "home";
                //     this.activeIndex = 1;
                // }
            };


        }
    }

    new Vue({
        el: "#app",
        components: {
            routerLink,
            routerView
        },
    })
    // window.onhashchange



</script>

</html>